    <template>
    <div class="container">
        <div class="header">
            <h3>权限列表</h3>
            <el-form label-width="80px"
                     class="demo-ruleForm"
                     :inline="true">
                <el-form-item label="用户名">
                    <el-input v-model="userName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               @click="search">查询
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium"
                               type="primary"
                               @click="addMessage">分配账号
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="content">
            <el-table :data="tableData"
                      ref="multipleTable"
                      tooltip-effect="dark"
                      border
                      style="width: 100%"
                      class="table"
                      @selection-change="handleSelectionChange">
                <el-table-column prop="uid"
                                 label="#ID"
                                 width="50"></el-table-column>
                <el-table-column prop="username"
                                 label="用户名"
                                 width="180"></el-table-column>
                <el-table-column prop="nickName"
                                 label="用户姓名"
                                 width="120"></el-table-column>
                <el-table-column prop="authoritiesStr"
                                 label="类型"
                                 :formatter="typeFormat"
                                 width="120"></el-table-column>
                <el-table-column prop="phoneNum"
                                 label="手机号码"
                                 width="120"></el-table-column>
                <el-table-column prop="registerDate"
                                 label="创建时间"
                                 :formatter="timeFormat"
                                 width="120"></el-table-column>
                <el-table-column prop="enabled"
                                 label="是否启用"
                                 width="180">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.enabled ? "已启用" :"已禁用"}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="phoneNum"
                                 label="操作"
                                 width="300">
                    <template slot-scope="scope">
                        <el-button class="btn"
                                   @click='qyjy(scope.row, scope.$index)'>操作
                        </el-button>
                        <el-button class="pan-btn green-btn"
                                   @click="editHandle(scope.row, scope.$index)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 弹窗编辑 -->
            <el-dialog title="修改用户信息"
                       :visible.sync="dialogFormVisible">
                <el-form :model="form"
                         label-width="150px"
                         ref="form"
                         status-icon
                         :rules="rules1"
                         class="demo-ruleForm">
                    <el-form-item label="用户昵称"
                                  prop="nickName">
                        <el-input class="nickName"
                                  v-model.trim="form.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码"
                                  prop="showPassword">
                        <el-input class="showPassword"
                                  v-model.trim="form.showPassword"
                                  placeholder="请输入密码"
                                  onkeyup="value=value.replace(/[\W]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码"
                                  prop="isPassword">
                        <el-input class="isPassword"
                                  v-model.trim="form.isPassword"
                                  placeholder="请再次输入密码"
                                  onkeyup="value=value.replace(/[\W]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="联系手机"
                                  prop="phoneNum">
                        <el-input class="phoneNum"
                                  v-model.number="form.phoneNum"
                                  maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-radio-group v-model="form.authoritiesStr">
                            <el-radio :label="1">普通用户</el-radio>
                            <el-radio :label="2">管理员</el-radio>
                            <!--<el-radio :label="3" >超级管理员</el-radio>-->
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="权限">
                        <template>
                            <el-checkbox-group v-model="form.checkList">
                                <el-checkbox label="创建活动"></el-checkbox>
                                <el-checkbox label="查看数据"></el-checkbox>
                                <el-checkbox label="短信接口"></el-checkbox>
                                <el-checkbox label="邮件接口"></el-checkbox>
                                <el-checkbox label="邮短接口"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-form-item>
                </el-form>
                <div slot="footer"
                     class="dialog-footer">
                    <el-button @click="cancelHandle">取 消</el-button>
                    <el-button type="primary"
                               @click="submitHandle()">确 定
                    </el-button>
                </div>
            </el-dialog>
            <!-- 弹窗新增 -->
            <el-dialog title="分配账号"
                       :visible.sync="dialogFormAddVisible">
                <el-form :model="addform"
                         label-width="150px"
                         ref="addform"
                         status-icon
                         :rules="rules"
                         class="demo-ruleForm">
                    <el-form-item label="用户名"
                                  prop="username">
                        <el-input class="nickName"
                                  v-model.trim="addform.username"></el-input>
                    </el-form-item>
                    <el-form-item label="用户昵称"
                                  prop="nickName">
                        <el-input class="nickName"
                                  v-model.trim="addform.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码"
                                  prop="showPassword">
                        <el-input class="showPassword"
                                  v-model.trim="addform.showPassword"
                                  placeholder="请输入密码,密码仅支持大小写字母、数字及下划线"
                                  onkeyup="value=value.replace(/[\W]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码"
                                  prop="isPassword">
                        <el-input class="isPassword"
                                  v-model.trim="addform.isPassword"
                                  placeholder="请再次输入密码,密码仅支持大小写字母、数字及下划线"
                                  onkeyup="value=value.replace(/[\W]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="联系手机"
                                  prop="phoneNum1">
                        <el-input class="phoneNum1"
                                  v-model.number="addform.phoneNum1"
                                  maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-radio-group v-model="addform.authoritiesStr">
                            <el-radio :label="1">普通用户</el-radio>
                            <el-radio :label="2">管理员</el-radio>
                            <!--<el-radio :label="3">超级管理员</el-radio>-->
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="权限">
                        <template>
                            <el-checkbox-group v-model="addform.checkList"
                                               :min="1">
                                <el-checkbox label="创建活动"></el-checkbox>
                                <el-checkbox label="查看数据"></el-checkbox>
                                <el-checkbox label="短信接口"></el-checkbox>
                                <el-checkbox label="邮件接口"></el-checkbox>
                                <el-checkbox label="邮短接口"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-form-item>
                </el-form>
                <div slot="footer"
                     class="dialog-footer">
                    <el-button @click="cancelHandle">取 消</el-button>
                    <el-button type="primary"
                               @click="submitAddHandle()">确 定
                    </el-button>
                </div>
            </el-dialog>
        </div>
        <div class="footer">
            <el-pagination @size-change="handleSizeChange"
                           :page-size='pageSize'
                           @current-change="handleCurrentChange"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {parseTime} from '@/utils/index'

    export default {
        name: 'Message',
        data() {
            let checkPhone = (rule, value, callback) => {
                const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
                if (!value) {
                    return callback(new Error('电话号码不能为空'))
                }
                setTimeout(() => {
                    // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
                    // 所以在前面加了一个+实现隐式转换

                    if (!Number.isInteger(+value)) {
                        callback(new Error('请输入数字值'))
                    } else {
                        if (phoneReg.test(value)) {
                            callback()
                        } else {
                            callback(new Error('电话号码格式不正确'))
                        }
                    }
                }, 100)
            };
            return {
                rules: {
                    phoneNum1: [
                        {required: true, validator: checkPhone, trigger: 'blur'}
                    ]
                },
                rules1: {
                    phoneNum: [
                        {required: true, validator: checkPhone, trigger: 'blur'}
                    ]
                },
                userName: '',
                pageSize: 10,
                pageNum: 0,
                tableData: [],
                total: 1,
                dialogFormVisible: false,
                dialogFormAddVisible: false,
                form: {
                    nickName: '',
                    showPassword: '',
                    isPassword: '',
                    phoneNum: '',
                    authoritiesStr: ''
                },
                addform: {
                    username: '',
                    nickName: '',
                    showPassword: '',
                    isPassword: '',
                    phoneNum1: '',
                    phoneNum: '',
                    authoritiesStr: '',
                    checkList: []
                }
            }
        },
        mounted() {
            this.search()
        },
        methods: {
            addNum() {
                console.log('asdas')
            },
            timeFormat(row, column) {
                const date = row[column.property]
                return parseTime(date)
            },
            // 接受数据
            search() {
                const that = this
                that.axios.get('/activityConsole/activity/console-user/getUserMessage', {
                    params: {
                        userName: that.userName,
                        pageNum: that.pageNum,
                        pageSize: that.pageSize
                    }
                }).then(function (res) {
                    console.log(res)
                    if (res.data.status == '200') {
                        that.tableData = res.data.data
                        that.total = parseInt(res.data.description)
                    }
                }).catch(function (error) {
                    console.log(error)
                    if (error.response.data.status == 403 && error.response.data.message == '不允许访问') {
                        that.$alert('您没有权限执行此操作', '权限不足提醒', {
                            confirmButtonText: '确定',
                            callback: function (action) {
                                that.$message({
                                    type: 'error',
                                    message: '权限不足'
                                })
                            }
                        })
                        that.$router.push('/')
                    }
                })
            },
            editHandle(row, index) {
                const _this = this
                _this.form = JSON.parse(JSON.stringify(row))
                _this.editIndex = index
                console.log(this.form.authoritiesStr)
                if (_this.form.authoritiesStr == 'ROLE_USER_SELF') {
                    _this.form.authoritiesStr = 1
                }
                if (_this.form.authoritiesStr == 'ROLE_USER_ADMIN') {
                    _this.form.authoritiesStr = 2
                }
                if (_this.form.authoritiesStr == 'ROLE_USER_SUPERADMIN') {
                    _this.dialogFormVisible = false
                    _this.$alert('您不能执行此操作', '超级管理员不允许被编辑', {
                        confirmButtonText: '确定',
                        callback: function (action) {
                            _this.$message({
                                type: 'error',
                                message: '非法操作'
                            })
                        }
                    })
                } else {
                    _this.dialogFormVisible = true
                }
                console.log(_this.form.authoritiesStr)
                console.log(_this.editIndex + '=============')
            },
            typeFormat(row, column, cellValue, index) {
                switch (cellValue) {
                    case 'ROLE_USER_SELF':
                        return '普通用户';
                    case 'ROLE_USER_ADMIN':
                        return '管理员';
                    case 'ROLE_USER_SUPERADMIN':
                        return '超级管理员'
                }
                return cellValue
            },
            cancelHandle() {
                this.dialogFormVisible = false;
                this.dialogFormAddVisible = false;
                this.form.isPassword = '';
                this.form.showPassword = ''
            },
            qyjy(row) {
                console.log(row);
                console.log(row.enabled);
                const _this = this;
                if (row.enabled == true) {
                    _this.enabled = false
                } else {
                    _this.enabled = true
                }
                _this.axios({
                    url: '/activityConsole/activity/console-user/changeEnabled',
                    method: 'post',
                    params: {
                        uid: row.uid,
                        enabled: _this.enabled
                    }
                }).then(function (res) {
                    console.log(res)
                    if (res.status == '200') {
                        _this.$message({
                            type: 'success',
                            message: res.data.description
                        })
                        _this.search()
                    }
                }).catch(function (error) {
                    console.log(error.response)
                    if (error.response.data.status == 403 && error.response.data.message == '不允许访问') {
                        _this.$alert('您没有权限执行此操作', '权限不足提醒', {
                            confirmButtonText: '确定',
                            callback: function (action) {
                                _this.$message({
                                    type: 'error',
                                    message: '权限不足'
                                })
                            }
                        })
                    } else {
                        _this.$message({
                            type: 'error',
                            message: error.data.description
                        })
                    }
                })
            },
            submitHandle() {
                var _this = this
                console.log(_this.form)
                var newobj = {}
                for (var attr in _this.form) {
                    newobj[attr] = _this.form[attr]
                }
                if (newobj.authoritiesStr === 1) {
                    newobj.authoritiesStr = 'USER_SELF'
                } else if (newobj.authoritiesStr === 2) {
                    newobj.authoritiesStr = 'USER_ADMIN'
                }
                if (_this.form.isPassword != _this.form.showPassword) {
                    console.log('两次密码输入不一致')
                    _this.$message({
                        message: '两次密码输入不一致,请重新输入',
                        type: 'error'
                    })
                } else {
                    newobj.password = _this.form.isPassword
                    console.log(newobj)
                    this.$refs['form'].validate(function (valid) {
                        if (valid) {
                            console.log('验证通过')
                            _this.axios.post('/activityConsole/activity/console-user/updateUser', newobj, {
                                headers: {
                                    'Content-Type': 'application/json;charset=utf-8'
                                }
                            }).then(function (res) {
                                console.log(res)
                                if (res.data.status == '200') {
                                    _this.$message({
                                        type: 'success',
                                        message: '叮咚！编辑成功'
                                    })
                                    _this.dialogFormVisible = false
                                    _this.search()
                                } else {
                                    _this.$message({
                                        type: 'error',
                                        message: res.data.description
                                    })
                                }
                            }).catch(function (err) {
                                console.log(err.response)
                                if (err.response.data.status == 403 && err.response.data.message == '不允许访问') {
                                    _this.$alert('您没有权限执行此操作', '权限不足提醒', {
                                        confirmButtonText: '确定',
                                        callback: function (action) {
                                            _this.$message({
                                                type: 'error',
                                                message: '权限不足'
                                            })
                                        }
                                    })
                                } else {
                                    _this.$message({
                                        type: 'error',
                                        message: error.data.description
                                    })
                                }
                            })
                        } else {
                            console.log('----------------')
                            _this.$message({
                                showClose: true,
                                message: '验证失败,请重新输入',
                                type: 'error',
                                duration: '3000'
                            })
                            return false
                        }
                    })
                }
            },
            submitAddHandle() {
                const _this = this
                const params = _this.addform
                console.log(params)
                console.log(_this.form)
                var newobj1 = {}
                for (var attr in params) {
                    newobj1[attr] = params[attr]
                }
                if (newobj1.authoritiesStr === 1) {
                    newobj1.authoritiesStr = 'USER_SELF'
                } else if (newobj1.authoritiesStr === 2) {
                    newobj1.authoritiesStr = 'USER_ADMIN'
                }
                // console.log(newobj1)
                if (params.isPassword != params.showPassword) {
                    console.log('两次密码输入不一致')
                    _this.$message({
                        message: '两次密码输入不一致,请重新输入',
                        type: 'error'
                    })
                } else if (params.authoritiesStr === '' || params.authoritiesStr == null) {
                    console.log('您未选择角色')
                    _this.$message({
                        message: '您未选择角色',
                        type: 'error'
                    })
                } else if (params.checkList.length === 0) {
                    console.log('您未选择权限')
                    _this.$message({
                        message: '您未选择权限',
                        type: 'error'
                    })
                } else {
                    newobj1.password = params.isPassword
                    newobj1.phoneNum = params.phoneNum1
                    console.log(newobj1)
                    this.$refs['addform'].validate(function (valid) {
                        if (valid) {
                            console.log('验证通过')
                            _this.axios.post('/activityConsole/activity/console-user/createUser', newobj1, {
                                headers: {
                                    'Content-Type': 'application/json;charset=utf-8'
                                }
                            }).then(function (res) {
                                if (res.data.status == '200') {
                                    _this.$message({
                                        type: 'success',
                                        message: '叮咚！分配用户成功'
                                    })
                                    _this.dialogFormAddVisible = false
                                    _this.search()
                                } else {
                                    _this.$message({
                                        type: 'error',
                                        message: res.data.description
                                    })
                                }
                            }).catch(function (err) {
                                console.log(err.response)
                                if (err.response.data.status == 403 && err.response.data.message == '不允许访问') {
                                    _this.$alert('您没有权限执行此操作', '权限不足提醒', {
                                        confirmButtonText: '确定',
                                        callback: function (action) {
                                            _this.$message({
                                                type: 'error',
                                                message: '权限不足'
                                            })
                                        }
                                    })
                                } else {
                                    _this.$message({
                                        type: 'error',
                                        message: error.data.description
                                    })
                                }
                            })
                        } else {
                            console.log('----------------')
                            _this.$message({
                                showClose: true,
                                message: '验证失败,请重新输入',
                                type: 'error',
                                duration: '3000'
                            })
                            return false
                        }
                    })
                }
            },
            addMessage() {
                this.dialogFormAddVisible = true
                this.addform = {
                    nickName: '',
                    showPassword: '',
                    isPassword: '',
                    phoneNum: '',
                    authoritiesStr: '',
                    checkList: []
                }
            },
            openEditRadio(v) {
                console.log(v) // 打印为 0 或 1
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.pageNum = parseInt(val) - 1
                this.search(this.pageNum)
            },
            renderMsgDate() {
                this.beginTime = this.dateTimes[0]
                this.endTime = this.dateTimes[1]
            },
            handleSelectionChange(val) {
                console.log(val)
            }
        }
    }
</script>
<style scoped>
    html,
    body {
        width: 100%;
        height: 100%;
    }

    .container {
        width: 100%;
        height: 100%;
    }

    h3 {
        margin-bottom: 30px;
    }

    .header {
        width: 100%;
        height: 140px;
    }

    .content {
        width: 100%;
    }

    .footer {
        margin-top: 10px;
        text-align: center;
    }

    .btn1 {
        float: right;
        margin-right: 10px;
    }

    .el-button.btn1.el-button--default {
        background-color: #21baa9;
        color: #fff;
    }
</style>
